<template>
  <div class="addcard">
    <ul>
      <li class="border-1px">
        <strong>持卡人</strong>
        <p>{{ userName }}</p>
      </li>
      <li class="border-1px">
        <strong>银行卡号</strong><input placeholder="请输入银行卡号" type="tel" id="cardNo" @input="formatCardNo" maxlength="23">
      </li>
      <li class="border-1px" @click="selectBank">
        <strong>开户银行</strong><p>{{ currentBank }}</p><span class="icon-more"></span>       
      </li>
      <li class="border-1px" @click="selectProvince">
        <strong>开户省</strong><p>{{ currentProvince }}</p><span class="icon-more"></span>       
      </li>
      <li class="border-1px" @click="selectCity">
        <strong>开户市</strong><p>{{ currentCity }}</p><span class="icon-more"></span>       
      </li>
      <li class="border-1px">
        <strong>开户支行</strong><input type="text" placeholder="请输入支行名称" v-model="branchName">
      </li>
    </ul>
    <button class="addcard-btn" @click="bindCard">绑定</button>
    <mt-popup v-model="popupVisible" pop-transition="popup-fade">
      <div class="popup-inner">
        <mt-radio
          v-model="currentValue"
          :options="currentNameOptions"
          @click.native="alert"
           ></mt-radio>
      </div>
    </mt-popup>

    <div class="addcard-popup-wrapper" v-if="promoteonceShow">
      <div class="addcard-popup">
        <div class="addcard-popup-header">
          <div class="addcard-popup-header-icon">
            <img :src="require('assets/tanchuang_bg.png')" alt="">
            <p>!</p>
          </div>
        </div>
        <div class="addcard-popup-content border-1px">
          <p>为了您的账户资金安全，只能绑定持卡人本人的银行卡</p>
          <p>如有疑问，请致电分秒金融客服400-608-2001</p>
        </div>
        <div class="addcard-popup-footer">
          <div @click="positive">
            <p>知道了</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import { Popup, Radio, Indicator, Toast } from 'mint-ui'
  import { luhnCheck } from '@/tool/check.js'

  export default {
    data () {
      return {
        label: 'province', // 标记用来记录当前选择的区域信息
        popupVisible: false,
        currentOptions: [],
        currentValue: '',
        currentProvince: '北京',
        currentCity: '北京',
        currentBank: '工商银行',
        bankCardNo: null,
        branchName: '',
        userName: '',
        provinceData: [],
        currentCityCode: '110100',
        currentProvinceCode: '110000',
        currentBankCode: 'ICBC',
        bankList: [],
        bank: {}
      }
    },
    computed: {
      promoteonceShow () {
        return this.$store.state.bankCardPromoteOnce
      },
      currentNameOptions () {
        return this.currentOptions.map((item) => (item.typeName || item.name))
      }
    },
    watch: {
      currentValue () {
        if (this.label === 'province') {
          this.currentProvince = this.currentValue
          this.currentProvinceCode = this.currentOptions.filter((item) => (item.name === this.currentValue))[0].code

          this.$http.get(`/api/base/baseDistrict/dicList?parentCode=${this.currentProvinceCode}`)
            .then((res) => {
              if (res.data.success) {
                this.currentOptions = res.data.data
                if (this.currentOptions.length === 1) {
                  this.currentCity = this.currentOptions[0].name
                  this.currentCityCode = this.currentOptions[0].code
                } else {
                  this.currentCity = this.currentOptions[0].name
                  this.currentCityCode = this.currentOptions[0].code
                }
              }
            })
        } else if (this.label === 'city') {
          this.currentCity = this.currentValue
          this.currentCityCode = this.currentOptions.filter((item) => (item.name === this.currentValue))[0].code
        } else {
          this.currentBank = this.currentValue
          this.bank = this.currentOptions.filter((item) => (item.typeName === this.currentValue))[0]
        }
      }
    },
    methods: {
      alert () {
        this.popupVisible = false
      },
      formatCardNo () {
        var val = document.getElementById('cardNo').value
        val = val.replace(/(\d{4})(?=\d)/g, '$1 ')
        document.getElementById('cardNo').value = val
      },
      selectProvince () {
        this.label = 'province'
        this.popupVisible = true
        this.currentOptions = this.provinceData
      },
      selectCity () {
        this.label = 'city'
        this.popupVisible = true

        // 获取到当前的省
        const province = this.provinceData.filter((item) => (item.name === this.currentProvince))[0]
        this.$http.get(`/api/base/baseDistrict/dicList?parentCode=${province.code}`)
          .then((res) => {
            if (res.data.success) {
              this.currentOptions = res.data.data
              if (this.currentOptions.length === 1) {
                this.currentCity = this.currentOptions[0].name
                this.currentCityCode = this.currentOptions[0].code
              }
            }
          })
      },
      selectBank () {
        this.label = 'bank'
        this.popupVisible = true
        this.currentOptions = this.bankList
        console.log(this.currentOptions)
      },
      bindCard () {
        const bankCardNo = document.getElementById('cardNo').value.replace(/\s/g, '') // 银行卡号还原
        if (!luhnCheck(bankCardNo)) {
          Toast('银行卡号错误！')
          return
        }
        if (!this.branchName) {
          Toast('请输入支行名称')
          return
        }
        const acctKey = this.$cookie.get('acctKey')
        const bankName = this.currentBank
        // const bankProvince = this.currentProvince
        // const bankCity = this.currentCity
        const bankBranch = this.branchName

        this.$http.post(`/api/member/memberBank/save`, `acctKey=${acctKey}&bankName=${bankName}&bankCode=${this.bank.bankTypeCode || this.currentBankCode}&bankProvince=${this.currentProvinceCode}&bankCity=${this.currentCityCode}&bankBranch=${bankBranch}&bankCardNo=${bankCardNo}`)
          .then((res) => {
            if (res.data.success) {
              Toast({
                message: '绑定成功',
                iconClass: 'icon icon-success'
              })
              setTimeout(() => {
                this.$router.back()
              }, 300)
            } else {
              Toast(res.data.msg)
            }
          })
          .catch((err) => {
            console.log(err)
          })
      },
      positive () {
        this.$store.commit('promoteOnce')
      }
    },
    created () {
      const acctkey = this.$cookie.get('acctKey')
      this.userName = this.$store.state.user.realName
      this.$http.get(`/api/base/baseDistrict/list`)
        .then((res) => {
          if (res.data.success) {
            this.provinceData = res.data.data
          }
        })
      this.$http.get(`/api/member/memberBank/getBankList?acctKey=${acctkey}&type=1&platformType=1`)
        .then((res) => {
          if (res.data.success) {
            this.bankList = res.data.data.list
          }
        })
    },
    components: {
      mtPopup: Popup,
      mtRadio: Radio,
      mtIndicator: Indicator,
      Toast
    }
  }
</script>

<style lang='scss' scoped>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .addcard {
    ul {
      padding: 0 30px;
      font-size: 30px;
      li {
        display: flex;
        align-items: center;
        height: 108px;
        @include border-1px(#{$base-e5e5e5});
        &:nth-child(1) {
          p {
            text-align: left;
            text-indent: 60px;
          }
        }
        p {
          flex: 1 0 auto;
          text-align: right;
          padding-right: 15px;
        }
        span {
          color: $base-999;
        }
        input {
          outline: none;
          flex: 1 0 auto;
          text-align: right;          
        }
      }
    }
    .popup-inner {
      width: 600px;
      overflow: auto;
      height: 900px;
      -webkit-overflow-scrolling : touch;
    }
    &-btn {
      display: block;
      width: 570px;
      height: 90px;
      border-radius: 45px;
      border: none;
      outline: none;
      user-select: none;
      margin: 120px auto 0 auto;
      text-align: center;
      line-height: 90px;
      color: $base-fff;
      background: $base-ff6c00;
      font-size: 36px;
    }
    .addcard-popup-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: rgba(0, 0, 0, .6);
      z-index: $zIndex-8--masklay;
    }
    &-popup {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      min-width: 300px;
      z-index: $zIndex-9--popup;
      background: $base-fff;
      border-radius: 10px;
      &-header {
        position: relative;
        left: 0;
        top: 0;
        height: 130px;
        text-align: center;
        &-icon {
          position: absolute;
          left: 50%;
          transform: translate(-50%, -40%);
          img {
            width: 310px;
          }
          p {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-30%, -60%);
            font-size: 60px;
            font-weight: bold;
            color: $base-fff;
          }
        }    
      }
      &-content {
        padding: 30px 60px 60px 60px;
        p {   
          font-size: 30px;
          line-height: 50px;
          color: $base-666;
        }
        @include border-1px(#ddd)
      }
      &-footer {
        width: 100%;
        font-size: 36px;
        color: $base-ff6c00;
        line-height: 120px;
        height: 120px;
        text-align: center;
        ul {
          display: flex;
          li {
            display: block;
            flex: 0 1 50%;
          }
          li:nth-child(1) {
            color: $base-ff6c00;
          }
          li:nth-child(2) {
            display: block;
            flex: 0 1 0;
            @include vertical-1px(#ddd)
          }
        }
      }
    }
  }
</style>
